<template>
  <div class="main">
    <div class="outerDiv">
      <goBack :white="true" :hasTitle="true" topTitle="升学规划报告"></goBack>
      <!-- <headerBack>
        <b slot="my-center" style="font-weight:600">升学规划报告</b>
      </headerBack> -->
      <scroller lock-x ref="myScroller">
        <div>
          <div class="resultPage">
            <div class="header">
              <div class="headArea">
                <div class="userImage">
                  <img v-if="userInfoVo.avatar" :src="userInfoVo.avatar" alt="" />
                  <img v-else src="~/static/images/default_avatar.png" alt="" />
                </div>
                <div class="userName">{{ userInfoVo.name }}</div>
                <div class="grade">{{ reportDetail.grade }} / {{ reportDetail.semester }}</div>
                <div class="createTime">生成时间:{{ reportDetail.createTime ? new Date(reportDetail.createTime).format('yyyy-MM-dd hh:mm') : '' }}</div>
              </div>
            </div>
            <div class="mainDiv">
              <!-- 生涯测评模块 -->
              <div class="topTwoModel" v-show="hasEvaluation">
                <div class="titleTip">生涯测评结果汇总</div>
                <div class="topTwoList">
                  <div class="topTwoItem" @click="jumpToEvaluation('1', evaluationVo.interest, evaluationVo.interestSet)">
                    <!-- <div class="title">职业兴趣测试<span>{{ getJsonArrLength(evaluationVo.interestSet) }}</span></div> -->
                    <div class="title">职业兴趣测试</div>
                    <div class="value">
                      <span>{{ hasEvaluation ? stringTurnToArr(evaluationVo.interest) : '' }}</span>
                      <img src="~/static/sxPlan/icon_arrows_more_32.png" alt="" />
                    </div>
                  </div>
                  <div class="topTwoItem" @click="jumpToEvaluation('4', evaluationVo.intelligence, evaluationVo.intelligenceSet)">
                    <div class="title">多元智能测试</div>
                    <div class="value">
                      <span>{{ hasEvaluation ? stringTurnToArr(evaluationVo.intelligence) : '' }}</span>
                      <img src="~/static/sxPlan/icon_arrows_more_32.png" alt="" />
                    </div>
                  </div>
                  <div class="topTwoItem" @click="jumpToEvaluation('2', evaluationVo.worth, evaluationVo.worthSet)">
                    <div class="title">职业价值观测试</div>
                    <div class="value">
                      <span>{{ hasEvaluation ? stringTurnToArr(evaluationVo.worth) : '' }}</span>
                      <img src="~/static/sxPlan/icon_arrows_more_32.png" alt="" />
                    </div>
                  </div>
                  <div class="topTwoItem" @click="jumpToEvaluation('3', evaluationVo.character, evaluationVo.characterSet)">
                    <div class="title">MBTI性格测试</div>
                    <div class="value">
                      <span>{{ hasEvaluation ? stringTurnToArr(evaluationVo.character) : '' }}</span>
                      <img src="~/static/sxPlan/icon_arrows_more_32.png" alt="" />
                    </div>
                  </div>
                  <div class="topTwoItem" @click="jumpToEvaluation('5', evaluationVo.grown, evaluationVo.grownSet)">
                    <div class="title">成长环境测试</div>
                    <div class="value">
                      <span>{{ hasEvaluation ? stringTurnToArr(evaluationVo.grown) : '' }}</span>
                      <img src="~/static/sxPlan/icon_arrows_more_32.png" alt="" />
                    </div>
                  </div>
                </div>
              </div>
              <!-- 目标 -->
              <div class="topTwoModel">
                <div class="titleTip">目标</div>
                <div class="topTwoList">
                  <div class="topTwoItem">
                    <div class="title">目标专业</div>
                    <div class="value">
                      <span>{{ reportDetail.major }}</span>
                    </div>
                  </div>
                  <div class="topTwoItem">
                    <div class="title">目标学校</div>
                    <div class="value">
                      <span>{{ reportDetail.academyName }}</span>
                    </div>
                  </div>
                  <div class="topTwoItem">
                    <div class="title">选科组合</div>
                    <div class="value">
                      <span>{{ reportDetail.subjects }}</span>
                    </div>
                  </div>
                  <div class="topTwoItem">
                    <div class="title">升学路径</div>
                    <div class="value">
                      <span>{{ reportDetail.path }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 成绩差距 -->
              <div class="topTwoModel">
                <div class="titleTip">成绩差距</div>
                <div class="container">
                  <div class="detailHead">
                    <div class="tableTitle">科目</div>
                    <div class="tableTitle">差距</div>
                    <div class="tableTitle">策略</div>
                  </div>
                  <div class="subjectList">
                    <div v-for="(item, index) of subjectList" :key="index" class="subItem">
                      <div class="name">{{ item.name }}</div>
                      <div class="value">{{ item.score }}</div>
                      <div class="value">{{ getScoreTip(item.score) }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 行动规划 -->
              <div class="actionPlan">
                <div class="actTitle">行动规划</div>
                <div class="actModel">
                  <div class="actPlanHeaderTitleArea type_1">
                    <div class="typeName">成绩提升</div>
                  </div>
                  <div class="content">
                    <div class="title">学习时远离诱惑物</div>
                    <div class="describe">很多同学都有学习不专注的问题，学习时应给自己创造一个安静的学习环境，远离能诱惑你的手机，电脑小说等。</div>
                    <div class="title">课前预习并制定听课目标</div>
                    <div class="describe">每节课上课之前花3分钟的时间简单看下节课要讲的一些基础知识点，把它划下来引起你的注意，并且制定一个听课目标，带着目的听课。</div>
                    <div class="title">随时做好笔记</div>
                    <div class="describe">在学习时，遇到不会的知识点、做错的题、经典案例分析、你认为具有代表性的题、公式等等，都应该随时记录在笔记本上。</div>
                    <div class="title">课后复习、总结归纳</div>
                    <div class="describe">课后要养成及时复习的习惯，复习能得到很多新的收获，使记忆巩固程度大幅提高。</div>
                    <div class="title">做好每一次的考后分析</div>
                    <div class="describe">每次考试后，仔细分析自己的各科成绩，找出自己到底是哪些科目的哪些模块比较薄弱，因为哪些原因没考好，找到问题后制定相应的调整复习方案。</div>
                  </div>
                </div>
                <div class="actModel">
                  <div class="actPlanHeaderTitleArea type_2">
                    <div class="typeName">目标认知</div>
                  </div>
                  <div class="targetArea">
                    <div class="major" @click="jumpToMajor(reportDetail.major)">
                      <div class="majorName">{{ reportDetail.major }}</div>
                      <div class="watchMore"><i></i></div>
                    </div>
                    <div class="college">
                      <div class="top" @click="jumpToCollege(reportDetail.academyCode)">
                        <div class="leftArea">
                          <div class="tip">目标大学</div>
                          <div class="collegeName">{{ reportDetail.academyName }}</div>
                        </div>
                        <div class="watchMore"><i></i></div>
                      </div>
                      <div class="bottom" v-if="reportDetail.enrollmentPlan && reportDetail.enrollmentPlan !== 0">
                        <div class="line">2019年招生计划 {{ reportDetail.enrollmentPlan }}</div>
                        <div class="line">2018年最低录取分 {{ reportDetail.enrollmentScore }}</div>
                        <div class="line hasMajor">
                          <div style="marginRight: 0.4rem;">2018年实际录取数 {{ reportDetail.enrollmentCount }}</div>
                          <div class="majorNum" @click="showMajor = !showMajor">
                            <span>专业 {{ majorVos.length }}</span>
                            <img v-if="!showMajor" src="~/static/school_icon_arrow_down.png" alt="" />
                            <img v-else src="~/static/school_icon_arrow_up.png" alt="" />
                          </div>
                        </div>
                      </div>
                      <div class="onlyMajor" v-else-if="majorVos.length > 0">
                        <div class="majorNum" @click="showMajor = !showMajor">
                          <span>专业 {{ majorVos.length }}</span>
                          <img v-if="!showMajor" src="~/static/school_icon_arrow_down.png" alt="" />
                          <img v-else src="~/static/school_icon_arrow_up.png" alt="" />
                        </div>
                      </div>
                      <div class="majorList" v-show="showMajor">
                        <div class="singleMajor" v-for="(item, index) of majorVos" :key="index" @click="getMajorDetail(reportDetail.academyCode, item.majorName)">
                          <div class="line line_1">
                            <div class="name">{{ item.majorName }}</div>
                          </div>
                          <div class="line">
                            <div class="code">{{ changeStr(item.majorCode) }}</div>
                          </div>
                          <div class="line line_2">
                            <div class="regime">学制 {{ item.regime }}年</div>
                            <div class="tuition">学费 {{ item.tuition }}/年</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="actModel">
                  <div class="actPlanHeaderTitleArea type_3">
                    <div class="typeName">研学实践</div>
                  </div>
                  <div class="content">
                    <div class="title">参与研学实践，亲身体验目标大学和专业</div>
                    <div class="describe">
                      带你走进国内顶尖大学，通过招办了解大学情况，聆听大学教授讲座，汲取与高中课堂不一样的知识，还能与学长或留学生深入交流，锻炼口语能力。漫步校园，感受校园美景，像本校学生一样，体验大学食堂丰富美食。在大学实验室里，培养自己的动手实践能力。各大学结合自己的优势专业、学生的年龄特点和各学科教学内容需要，使学生对自己的目标大学和专业方向更了解、对未来的生涯规划有了更明确的认识。
                    </div>
                  </div>
                </div>
                <div class="actModel">
                  <div class="actPlanHeaderTitleArea type_4">
                    <div class="typeName">升学路径</div>
                  </div>
                  <div class="content">
                    <div class="title">多途径升学路径选择，会有意外收获</div>
                    <div class="describe">高中生除统一高考外，还有十余种其他升学路径，如自主招生、专项计划、艺术类高考等。很多考生和家长不了解它们，往往只考虑“裸分”高考一条路，从而错失上更好大学的机会！做一份科学的升学规划方案从了解每一种升学路径开始，总有一种适合你！</div>
                  </div>
                </div>
                <div class="actModel">
                  <div class="actPlanHeaderTitleArea type_5">
                    <div class="typeName">成绩提升</div>
                  </div>
                  <div class="content">
                    <div class="title">做好生涯规划，成为自己生命的设计师</div>
                    <div class="describe">
                      高中生涯规划将直接影响整个人生发展方向。做好生涯规划，可以帮助学生更加深入、更加全面地认识自我，发掘个人潜力；可以帮助学生更加清晰的认识大学、专业和职业，找到人生目标。高中生涯规划，是对学生个人内部世界、外部世界做充分的认知和探索，开启无限可能；通过对这些可能性的探索和实践，找到属于自己的那条路，确定人生发展目标。在高中阶段，可采取校内+校外、线上+线下方法学习生涯知识、加强社会实践。若您仍然目标迷茫、学习动力不足、效率低下，不妨找我们聊聊，这里有最专业的老师一直陪伴！
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="width: 100%; height: 2rem;"></div>
        </div>
      </scroller>
      <div v-transfer-dom>
        <popup v-model="showMajorScore" position="bottom" max-height="50%">
          <div style="width: 7.5rem;height: 100vh;">
            <div class="popBoxWrap">
              <scroller>
                <div class="popBox">
                  <span class="closeSp" @click="showMajorScore = false">
                    <i class="imgIcon"></i>
                  </span>
                  <span class="titleLuqu">{{ gotitle }}</span>
                  <div class="luquBox">
                    <admission-line :lineData="lineData1" :titleData="titleData1"></admission-line>
                  </div>
                </div>
              </scroller>
            </div>
          </div>
        </popup>
      </div>
    </div>
  </div>
</template>

<script>
import ls from 'store2'

import { getMajorDetails, getReportDetails } from '~/api/colleges'
import goBack from '~/components/goBack_white'
import admissionLine from './components/admissionLine'
import { format } from '~/plugins/filter'
import { TransferDom, Popup } from 'vux'
export default {
  directives: {
    TransferDom,
  },
  components: {
    goBack,
    Popup,
    admissionLine,
  },
  data() {
    return {
      preUrl: null,
      reportId: null, // 结果ID
      reportDetail: {},
      subjectList: [],
      hasEvaluation: false,
      evaluationVo: {
        interest: null, // 职业兴趣
        worth: null, // 职业价值观
        intelligence: null, // 多元智能
        character: null, // MBTI性格
        grown: null, // 成长环境
      },
      showMajor: false,
      userInfoVo: {},
      majorVos: [],
      showMajorScore: false,
      titleData1: [],
      lineData1: [],
      gotitle: '',
    }
  },
  mounted() {
    this.$visit(this.$route.path)
    this.reportId = this.$route.query.type
    ls.remove('collegeExamType')

    this.getReportDetails()
    if (ls.get('jumpFromReport')) {
      this.preUrl = './report'
    } else {
      if (ls.get('isHistory')) {
        this.preUrl = './history'
      } else {
        this.preUrl = './indexs'
      }
    }
  },
  methods: {
    getMajorDetail(code, name) {
      this.showMajorScore = true
      this.gotitle = name
      this.$loading('open')
      this.titleData1 = ['年份', '最低分', '最低位次', '录取人数', '专业线差']
      let majorObj = {
        academyCode: code,
        majName: name,
        userType: ls.get('userType'),
      }
      getMajorDetails(majorObj)
        .then((res) => {
          if (res.code === '0') {
            let colData = res.data
            let are = []
            colData.forEach((item) => {
              item.minScore === 0 ? (item.minScore = '--') : (item.minScore = item.minScore)
              item.minRanking === 0 ? (item.minRanking = '--') : (item.minRanking = item.minRanking)
              item.numPlan === 0 ? (item.numPlan = '--') : (item.numPlan = item.numPlan)
              item.errand === 0 ? (item.errand = '--') : (item.errand = item.errand)
              are.push({
                main: [item.year, item.minScore, item.minRanking, item.numPlan, item.errand],
              })
            })
            this.lineData1 = are
          }
        })
        .catch((error) => {
          // this.$vux.toast.text(error);
        })
        .finally(() => {
          this.$hideLoading()
        })
    },
    changeStr(str) {
      return str.replace(/\+/g, '、')
    },
    getReportDetails() {
      this.$loading('open')
      getReportDetails({ id: this.reportId })
        .then((res) => {
          this.reportDetail = res.data
          this.userInfoVo = res.data.userInfoVo
          this.majorVos = res.data.majorVos
          this.subjectList = JSON.parse(res.data.score)
          if (res.data.evaluationVo) {
            this.evaluationVo = res.data.evaluationVo
            this.hasEvaluation = true
          } else {
            this.hasEvaluation = false
          }
        })
        .finally(() => {
          this.$hideLoading()
        })
    },
    // 分数区间
    getScoreTip(score) {
      let string = ''
      if (score >= 0 && score <= 5) {
        string = '继续保持'
      } else if (score >= 6 && score <= 14) {
        string = '稍稍加强'
      } else if (score >= 15 && score <= 29) {
        string = '大力提升'
      } else {
        string = '超级努力'
      }
      return string
    },
    // 将JSON字符串拆分为数组，并返回第一个数
    stringTurnToArr(string) {
      const arr = string.split('+')
      return arr[0]
    },
    getJsonArrLength(json) {
      const arr = JSON.parse(json)
      return arr.length
    },
    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData,
        },
      })
    },
    checkTerminal() {
      var u = navigator.userAgent
      var chrome = u.match(/Chrome\/([\d.]+)/) || u.match(/CriOS\/([\d.]+)/)
      var isWechat = u.toLowerCase().match(/MicroMessenger/i) == 'micromessenger' || u.match(/_SQ_/i) == '_sq_'
      var isAndroid = u.match(/(Android);?[\s\/]+([\d.]+)?/)
      var isiOS = !chrome && u.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/)
      if (isWechat) {
        return 'wechat'
      } else if (isiOS) {
        return 'ios'
      } else if (isAndroid) {
        return 'android'
      }
    },
    // 跳转到生涯结果单页
    jumpToEvaluation(type, name, arr) {
      let arrs = JSON.parse(arr)
      let obj = {
        status: type,
        worthScore: arrs,
      }
      ls.set('resultPar', obj)
      this.commonJs.gopush('../evaluation/chiResult')
    },
    // 跳转到院校库
    jumpToCollege(code) {
      this.$router.push({ path: '../yxk/academyDetail?academyCode=' + code + '&gobackwx=true' })
    },
    jumpToMajor(name) {
      this.$router.push({ path: '../professional/majorList?type=' + name })
    },
  },
}
</script>

<style lang="less" scoped>
.outerDiv {
  width: 100%;
  height: 100vh;
  background: #f7f7fa;
  position: relative;
  .resultPage {
    position: relative;
    .header {
      width: 100%;
      height: 5.22rem;
      padding-top: 0.8rem;
      background: url('~/static/sxPlan/header_bg.png') no-repeat 100% 100%;
      background-size: 100% 100%;
      .headArea {
        text-align: center;
        color: #fff;
        .userImage {
          width: 1.25rem;
          height: 1.25rem;
          margin: 0 auto 0.1rem;
          img {
            border-radius: 50%;
            width: 100%;
            height: 100%;
          }
        }
        .userName {
          font-size: 0.36rem;
          font-weight: bold;
          letter-spacing: 1px;
        }
        .grade {
          font-size: 0.18rem;
          margin-bottom: 0.1rem;
        }
        .createTime {
          font-size: 0.24rem;
        }
      }
    }
    .mainDiv {
      padding: 0 0.3rem;
      position: relative;
      top: -1.35rem;
      left: 0;
      .titleTip {
        color: #bbb;
        font-size: 0.26rem;
        line-height: 0.37rem;
        font-weight: bold;
        padding-left: 0.4rem;
        margin-bottom: 0.1rem;
        letter-spacing: 1px;
      }
      .topTwoModel {
        width: 100%;
        padding: 0.44rem 0 0.55rem;
        background: #fff;
        border-radius: 0.2rem;
        margin-bottom: 0.2rem;
        .topTwoList {
          .topTwoItem {
            width: 100%;
            height: 0.9rem;
            padding: 0 0.3rem 0 0.4rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .title {
              color: #222;
              font-size: 0.3rem;
              font-weight: bold;
              span {
                display: inline-block;
                width: 0.48rem;
                height: 0.42rem;
                background: #f7f7fa;
                border-radius: 0.2rem;
                color: #c7c7c7;
                font-size: 0.26rem;
                line-height: 0.42rem;
                text-align: center;
                margin-left: 0.16rem;
              }
            }
            .title::before {
              content: '';
              display: inline-block;
              width: 0.21rem;
              height: 0.21rem;
              border: 0.06rem solid @mainColor;
              border-radius: 50%;
              margin-right: 0.2rem;
            }
            .value {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              span {
                color: @mainColor;
                font-size: 0.3rem;
                font-weight: bold;
              }
              img {
                width: 0.32rem;
                height: 0.32rem;
                margin-left: 0.08rem;
              }
            }
          }
        }
        .container {
          padding: 0 0.26rem 0 0.21rem;
          .detailHead {
            padding: 0 0.84rem 0 0.62rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.33rem;
            .tableTitle {
              color: #000;
              font-size: 0.28rem;
              font-weight: bold;
            }
          }
          .subjectList {
            .subItem {
              width: 100%;
              height: 0.98rem;
              padding: 0 0.53rem 0 0.62rem;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 0.12rem;
              .name {
                color: #000;
                font-size: 0.28rem;
                font-weight: bold;
              }
              .value {
                color: @mainColor;
                font-size: 0.3rem;
                font-weight: bold;
              }
            }
            .subItem:nth-child(odd) {
              // 奇数行
              background: #fffceb;
            }
            .subItem:nth-child(even) {
              // 偶数行
              background: #fbfdff;
            }
          }
        }
      }
      .actionPlan {
        padding: 0.6rem 0 1rem;
        width: 100%;
        background: #fff;
        border-radius: 0.2rem;
        .actTitle {
          color: #010101;
          font-size: 0.36rem;
          font-weight: bold;
          padding-left: 0.44rem;
          margin-bottom: 0.25rem;
        }
        .actTitle::before {
          content: '';
          display: inline-block;
          width: 0.18rem;
          height: 0.26rem;
          border-radius: 5px;
          background: @mainColor;
          margin-right: 0.24rem;
        }
        .actModel {
          padding: 0.2rem 0 1rem;
          border-bottom: 1px solid #eee;
          .actPlanHeaderTitleArea {
            width: 100%;
            height: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding-left: 0.5rem;
            .typeName {
              font-size: 0.48rem;
              font-weight: bold;
            }
            .typeName:before {
              display: inline-block;
              width: 0.46rem;
              height: 0.46rem;
              line-height: 0.46rem;
              text-align: center;
              border-radius: 50%;
              color: #fff;
              font-size: 0.36rem;
              margin-right: 0.58rem;
            }
          }
          .type_1 {
            background: url('~/static/sxPlan/type_1.png') no-repeat 100% 100%;
            background-size: 100% 100%;
            margin-bottom: 0.9rem;
            .typeName {
              color: @mainColor;
            }
            .typeName:before {
              content: '1';
              background: @mainColor;
            }
          }
          .type_2 {
            background: url('~/static/sxPlan/type_2.jpg') no-repeat 100% 100%;
            background-size: 100% 100%;
            margin-bottom: 0.9rem;
            .typeName {
              color: #51c6ff;
            }
            .typeName:before {
              content: '2';
              background: #51c6ff;
            }
          }
          .type_3 {
            background: url('~/static/sxPlan/type_3.jpg') no-repeat 100% 100%;
            background-size: 100% 100%;
            margin-bottom: 0.9rem;
            .typeName {
              color: #fbc42a;
            }
            .typeName:before {
              content: '3';
              background: #fbc42a;
            }
          }
          .type_4 {
            background: url('~/static/sxPlan/type_4.jpg') no-repeat 100% 100%;
            background-size: 100% 100%;
            margin-bottom: 0.9rem;
            .typeName {
              color: #df6467;
            }
            .typeName:before {
              content: '4';
              background: #df6467;
            }
          }
          .type_5 {
            background: url('~/static/sxPlan/type_5.jpg') no-repeat 100% 100%;
            background-size: 100% 100%;
            margin-bottom: 0.9rem;
            .typeName {
              color: #4dd6b5;
            }
            .typeName:before {
              content: '5';
              background: #4dd6b5;
            }
          }
          .content {
            padding: 0 0.45rem;
            color: #000;
            font-size: 0.26rem;
            line-height: 0.45rem;
            .title {
              font-weight: bold;
            }
            .describe {
              margin-bottom: 0.4rem;
            }
          }
          .targetArea {
            padding: 0.2rem 0.2rem 0;
            .major {
              width: 100%;
              height: 0.85rem;
              background: #fafafa;
              border-radius: 5px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 0.14rem 0 0.19rem;
              margin-bottom: 0.44rem;
              .majorName {
                color: #000;
                font-size: 0.36rem;
                font-weight: bold;
              }
              .majorName:before {
                content: '';
                display: inline-block;
                width: 0.18rem;
                height: 0.26rem;
                border-radius: 5px;
                background: #56c8ff;
                margin-right: 0.24rem;
              }
            }
            .watchMore {
              width: 0.4rem;
              height: 0.4rem;
              i {
                width: 100%;
                height: 100%;
                display: inline-block;
                background: url('~@/static/sprite/icon_sprites_40.png') -1.3rem -0.7rem;
                background-size: 3rem 2.4rem;
              }
            }
            .college {
              padding: 0.2rem 0;
              border-radius: 0.15rem;
              background: #f7f7fa;
              .top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 0.2rem;
                margin-right: 0.14rem;
                .leftArea {
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  .tip {
                    padding: 0.1rem 0.14rem 0.1rem 0.12rem;
                    background: #56c8ff;
                    border-top-right-radius: 0.3rem;
                    border-bottom-right-radius: 0.3rem;
                    color: #fff;
                    font-size: 0.28rem;
                    font-weight: bold;
                    margin-right: 0.33rem;
                  }
                  .collegeName {
                    color: #222;
                    font-size: 0.36rem;
                    font-weight: bold;
                  }
                }
              }
              .bottom {
                padding-left: 1.68rem;
                .line {
                  color: #999;
                  font-size: 0.26rem;
                }
                .hasMajor {
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  .majorNum {
                    display: flex;
                    align-items: center;
                    span {
                      font-weight: bold;
                    }
                    img {
                      width: 0.32rem;
                      height: 0.32rem;
                    }
                  }
                }
              }
              .onlyMajor {
                margin-right: 0.6rem;
                .majorNum {
                  color: #999;
                  font-size: 0.26rem;
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                  span {
                    font-weight: bold;
                  }
                  img {
                    width: 0.32rem;
                    height: 0.32rem;
                  }
                }
              }
              .majorList {
                margin-top: 0.2rem;
                .singleMajor {
                  width: 100%;
                  border-bottom: 1px solid #e5e8ed;
                  padding: 0.2rem 0.3rem 0;
                  .line {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .code {
                      color: #999;
                      font-size: 0.2rem;
                    }
                  }
                  .line_1 {
                    .name {
                      color: #222;
                      font-size: 0.28rem;
                      font-weight: bold;
                      max-width: 5rem;
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      -webkit-line-clamp: 1;
                      overflow: hidden;
                      -webkit-box-orient: vertical;
                    }
                  }
                  .line_2 {
                    color: #999;
                    font-size: 0.2rem;
                    .tuition {
                      margin-left: 0.3rem;
                    }
                  }
                }
              }
            }
          }
        }
        .actModel:last-child {
          border: none;
        }
      }
    }
  }
}
/deep/.vux-popup-dialog {
  background: none;
}

.popBoxWrap {
  width: 7.5rem;
  min-height: 100vh;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.3rem 0.3rem 0px 0px;

  .popBox {
    width: 100%;
    height: auto;
    min-height: 100vh;
    overflow: hidden;
    padding: 0 0.3rem;
    box-sizing: border-box;

    .closeSp {
      display: block;
      width: 0.4rem;
      height: 0.4rem;
      margin-left: 6.4rem;
      margin-top: 0.3rem;
      font-size: 0.3rem;
      margin-bottom: 0.3rem;

      .imgIcon {
        width: 0.4rem;
        height: 0.4rem;
        display: inline-block;
        background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -0.7rem;
        background-size: 3rem 2.4rem;
      }
    }

    .luquBox {
      width: 100%;
      height: auto;
    }

    .titleLuqu {
      display: block;
      font-size: 0.3rem;
      font-weight: bold;
      color: rgba(34, 34, 34, 1);
      line-height: 0.42rem;
      margin-bottom: 0.3rem;
    }
  }
}
</style>
